let color = '#000'

function renderSocketChart() {
    var myChart = echarts.init(document.getElementById('socketChart'));
    var option = {
        "title": {
            "text": "插座用电",
            textStyle:{
                color
            }
        },
        "legend": {
            "orient": "vertical",
            "right": "right",
            "data": ["0-100W", "100-200W", "200-300W", "300W以上"]
        },
        "series": [{
            "type": "pie", "tooltip": {
                "trigger": "item",
                "formatter": "{a} <br/>{b} : {d} "
            },
            "data": []
        }]
    }
    // $.ajax({
    //     type: "get",
    //     url: "./插座用电.json",
    //     dataType: 'json',
    //     async: true, //是否异步请求
    //     success: function (data) {
    //         option.series[0].data = data.data;
    //         myChart.setOption(option);
    //     }
    // })
    option.series[0].data = [{
        "value": 33.5,
        "name": "0-100WH"
    },
    {
        "value": 120,
        "name": "100-200WH"
    },
    {
        "value": 124,
        "name": "200-300WH"
    },
    {
        "value": 135,
        "name": "300WH以上"
    }];
    myChart.setOption(option);
}
function renderSwitchChart() {
    var myChart = echarts.init(document.getElementById('switchChart'));
    var option = {
        "title": {
            "text": "开关单次用电",
            textStyle:{
                color
            }
        },
        "legend": {
            "orient": "vertical",
            "right": "right",
            "data": ["0-100W", "100-200W", "200-300W", "300W以上"]
        },
        "series": [{
            "type": "pie", "tooltip": {
                "trigger": "item",
                "formatter": "{a} <br/>{b} : {d} "
            },
            "data": []
        }]
    }
    // $.ajax({
    //     type: "get",
    //     url: "./开关用电.json",
    //     dataType: 'json',
    //     async: true, //是否异步请求
    //     success: function (data) {
    //         option.series[0].data = data.data;
    //         myChart.setOption(option);
    //     }
    // })
    option.series[0].data = [{
        "value": 313.5,
        "name": "0-100WH"
    },
    {
        "value": 120,
        "name": "100-200WH"
    },
    {
        "value": 124,
        "name": "200-300WH"
    },
    {
        "value": 235,
        "name": "300WH以上"
    }
    ];
    myChart.setOption(option);
}

function liquidFill() {
    var chart = echarts.init(document.getElementById('liquidfill-chart'));

    var option = {
        title: {
            "text": "最近一次考勤合格率",
            textStyle:{
                color
            }
        },
        series: [{
            type: 'liquidFill',
            data: []
        }]
    };
    // $.ajax({
    //     type: "get",
    //     url: "./attendance.json",
    //     dataType: 'json',
    //     async: true, //是否异步请求
    //     success: function (data) {
    //         option.series[0].data[0] = data.data;
    //         chart.setOption(option);
    //     }
    // })
    option.series[0].data[0] = 0.8
    chart.setOption(option);
}
function renderHumidityChart() {
    let humidityChart = echarts.init(document.getElementById('humidityChart'))

    let option = {
        title: {
            text: "湿度统计",
            textStyle:{
                color
            }
        },
        "color": ["SkyBlue"],
        xAxis: {
            name: '湿度',
            type: 'category',
            data: ['55%', '60%', '65%', '70%', '75%', '80%', '85%', '90%', '95%'],
            nameTextStyle:{
                color
            },
            axisLabel:{
                color
            },
            axisLine:{
                lineStyle:{
                    color
                }
            }
        },
        yAxis: {
            name: '设备数量',
            type: 'value',
            nameTextStyle:{
                color
            },
            axisLabel:{
                color
            },
            axisLine:{
                lineStyle:{
                    color
                }
            }
        },
        series: [{
            //data: [20, 30, 40, 50, 60, 70, 60, 50, 40],
            data: [],
            type: 'bar',
            showBackground: false,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    }
    // $.ajax({
    //     type: "get",
    //     url: "./humidity.json",
    //     dataType: 'json',
    //     async: true, //是否异步请求
    //     success: function (data) {
    //         option.series[0].data = data.data;
    //         humidityChart.setOption(option)
    //     }
    // })
    option.series[0].data = [20, 30, 40, 50, 60, 70, 60, 50, 40];
    humidityChart.setOption(option)
}

function renderTempChart() {
    let tempChart = echarts.init(document.getElementById('tempChart'))

    let option = {
        title: {
            text: "温度统计",
            textStyle:{
                color
            }
        },
        "color": ["SkyBlue"],
        xAxis: {
            name: '温度',
            type: 'category',
            data: ['10°C', '20°C', '30°C', '40°C', '50°C', '60°C', '70°C', '80°C', '90°C'],
            nameTextStyle:{
                color
            },
            axisLabel:{
                color
            },
            axisLine:{
                lineStyle:{
                    color
                }
            }
        },
        yAxis: {
            name: '设备数量',
            type: 'value',
            nameTextStyle:{
                color
            },
            axisLabel:{
                color
            },
            axisLine:{
                lineStyle:{
                    color
                }
            }
        },
        series: [{
            data: [],
            type: 'bar',
            showBackground: false,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    }
    // $.ajax({
    //     type: "get",
    //     url: "./renderTempChart.json",
    //     dataType: 'json',
    //     async: true, //是否异步请求
    //     success: function (data) {
    //         option.series[0].data = data.data;
    //         tempChart.setOption(option)
    //     }
    // })
    option.series[0].data = [20, 40, 50, 80, 60, 40, 10, 5, 3];
    tempChart.setOption(option)
}

renderHumidityChart();
renderTempChart();
renderSocketChart();
renderSwitchChart();
liquidFill();
